import { _decorator, Label, Node, tween, Tween } from 'cc';
import { BasePopUp } from '../../../frame/component/ui.pop-up';
import type { Popup } from '../page/pop-up';
const { ccclass, property } = _decorator;

@ccclass('ppCongratulation')
export class ppCongratulation extends BasePopUp<typeof Popup, null> {
	protected default_return: null;

	private item_list: Array<{node: Node, light: Node, lbl: Label}>;

	protected initAfterOnLoad(){
		this.init();
		this.initUIStatus();
	}

	public onShow(list: Array<['free'|'master'|'stash'|'revoke'|'shuffle', number]>){
		list.forEach((el, idx)=>{
			let item = this.item_list[idx];
			item.node.active = true;
			item.node.parent.active = true;

			let icon_name = 'icon-'+el[0];
			['icon-free', 'icon-master', 'icon-stash', 'icon-revoke', 'icon-shuffle']
			.forEach(name=>item.node.getChildByName(name).active = name===icon_name);
			item.lbl.string = 'x'+el[1];

			Tween.stopAllByTarget(item.light);
			tween(item.light).set({angle: 0})
			.to(5, {angle: -360}).union()
			.repeatForever().start();
		});

		mtec.delay(2, ()=>{
			this.close(null);
			this.item_list.forEach(item=>{
				Tween.stopAllByTarget(item.light);
				item.light.angle = 0;
				item.node.active = false;
				item.node.parent.active = false;
			});
		});
	}

	private init(){
		this.item_list = [];
		let container = this.node.getChildByName('container');

		container.children.forEach(row=>row.children.forEach(cell=>this.item_list.push({
			node: cell, light: cell.getChildByName('background-light'), lbl: cell.getChildByName('lbl-value').getComponent(Label)
		})));
	}

	private initUIStatus(){
		this.node.getChildByName('lbl-head').getComponent(Label).string = 'CONGRATULATIONS!';
		this.item_list.forEach(el=>{
			el.node.active = false;
			el.node.parent.active = false;
		});
	}
}

